<template>
  <section class="pet-knowledge">
    <div class="news_box" style="background: linear-gradient(135deg, #F1F5F8 0%, #e3f2fd 100%); background-size: cover; background-attachment: fixed;">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="section-header text-center mb-5 pt-5">
              <p class="about_line"></p>
              <h2 class="about_h2">宠物栏目</h2>
              <p class="about_p">pet knowledge</p>
            </div>
            
            <div class="row pb-5">
              <div 
                v-for="article in articles" 
                :key="article.id"
                class="col-sm-6 col-lg-3 mb-4"
              >
                <div class="news-card">
                  <div class="news-image-wrapper">
                    <a href="javascript:void(0)" @click.prevent>
                      <img 
                        :src="article.image" 
                        :alt="article.title"
                        class="opacity_img news-image"
                        @error="handleImageError"
                      >
                    </a>
                  </div>
                  <div class="news-content">
                    <h5 class="news-title">
                      <a 
                        href="javascript:void(0)" @click.prevent
                        class="text-decoration-none"
                        :title="article.title"
                      >
                        {{ article.title }}
                      </a>
                    </h5>
                    <p class="news-desc">{{ article.description }}</p>
                    <div class="news-meta">
                      <span class="news-category">{{ getCategoryName(article.category) }}</span>
                      <span class="news-date">{{ formatDate(article.date) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="text-center">
              <router-link to="/pet-column" class="btn btn-primary btn-lg">
                查看更多宠物资讯
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'PetKnowledge',
  data() {
    return {
      articles: [
        {
          id: 1,
          title: '抵制大规模捕杀流浪狗',
          category: 'news',
          image: require('@/assets/images/20231021/1697894351760656.jpg'),
          description: '一场针对无辜流浪狗的猎杀正在进行！在全国各地，很多人加入了这···',
          date: '2023-10-21'
        },
        {
          id: 2,
          title: '虐待动物行为入法有望',
          category: 'news',
          image: require('@/assets/images/20230908/1694158757893769.jpg'),
          description: '虐待动物行为入法有望！在今年十四届全国人大一次会议期间，海南···',
          date: '2023-09-08'
        },
        {
          id: 3,
          title: '中国狂犬病防治项目再起航',
          category: 'news',
          image: require('@/assets/images/20230515/1684134809700382.jpg'),
          description: '每年四月的*后一个周六是世界兽医日。在2023年世界兽医日来···',
          date: '2023-05-15'
        },
        {
          id: 4,
          title: '猫为什么会炸毛',
          category: 'knowledge',
          image: require('@/assets/images/20230422/1682161055444343.png'),
          description: '猫咪的毛发就像是人类的汗毛和头发一样，在猫毛的底端有连接着皮···',
          date: '2023-04-22'
        }
      ]
    }
  },
  methods: {
    handleImageError(event) {
      // 如果图片加载失败，显示默认样式
      event.target.style.display = 'none'
      const parent = event.target.parentElement
      if (parent && !parent.querySelector('.news-error-placeholder')) {
        const placeholder = document.createElement('div')
        placeholder.className = 'news-error-placeholder'
        placeholder.style.cssText = 'width:100%;height:180px;background:#04A07B;color:white;display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:16px;'
        placeholder.textContent = '📰 宠物资讯'
        parent.appendChild(placeholder)
      }
    },
    getCategoryName(category) {
      const categoryMap = {
        'news': '宠物新闻',
        'knowledge': '养宠知识'
      }
      return categoryMap[category] || '其他'
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
    }
  }
}
</script>

<style scoped>
.pet-knowledge {
  position: relative;
}

.news_box {
  position: relative;
  min-height: 600px;
  padding: 4rem 0;
}

.news_box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(241, 245, 248, 0.9);
  z-index: 1;
}

.container {
  position: relative;
  z-index: 2;
}

.news-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  height: 100%;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.news-image-wrapper {
  overflow: hidden;
  height: 200px;
}

.news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.news-image:hover {
  transform: scale(1.05);
}

.news-content {
  padding: 1.5rem;
}

.news-title a {
  color: #333;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.4;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-title a:hover {
  color: #04A07B;
}

.news-desc {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 1rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #999;
}

.news-category {
  background: #04A07B;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
}

.news-date {
  font-size: 0.75rem;
}

.btn-primary {
  padding: 12px 30px;
  font-size: 1.1rem;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(4, 160, 123, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .news_box {
    background-attachment: scroll;
    padding: 3rem 0;
    min-height: 500px;
  }
  
  .news-image-wrapper {
    height: 150px;
  }
  
  .news-content {
    padding: 1rem;
  }
  
  .news-title a {
    font-size: 1rem;
  }
  
  .news-desc {
    font-size: 0.85rem;
    -webkit-line-clamp: 2;
  }
  
  .btn-primary {
    padding: 10px 25px;
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .news_box {
    padding: 2rem 0;
    min-height: 400px;
  }
  
  .news-image-wrapper {
    height: 120px;
  }
  
  .news-content {
    padding: 0.75rem;
  }
  
  .news-title a {
    font-size: 0.95rem;
  }
  
  .news-desc {
    font-size: 0.8rem;
    margin: 0.75rem 0;
  }
  
  .news-meta {
    font-size: 0.7rem;
  }
  
  .news-category {
    font-size: 0.7rem;
    padding: 1px 6px;
  }
}
</style>
